<template>
  <div>
    <data-table :head="thead" :data="tableData" :page='currentPage' @callback="manipulate4"
                class="intendance-table" :actions="['edit','view','del']"></data-table>
    <i class="el-icon-circle-plus-outline add-icon" @click="addShip"></i>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                   :total="totalPage" background>
    </el-pagination>
    <el-dialog title="" :visible.sync="shipDetail" width="80%" append-to-body class="dialogDetail shipDetail" @close="toClose">
      <h2 class="titleblue">{{shipTitle}}</h2>
      <div class="contant">
        <el-row>
          <el-form ref="form" :model="ship">
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class"><i>*</i>培训机构名称</label>
                <el-input v-model="ship.eduOrgName" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">地址</label>
                <el-input v-model="ship.address" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">联系人</label>
                <el-input v-model="ship.contact" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">类别</label>
                <el-select clearable v-model="ship.type" :disabled='readread' class="select-width-220 fl">
                  <el-option v-for="item in lbOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">电话</label>
                <el-input v-model="ship.telephone" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <label class="fl lab-class">其他</label>
                <el-input v-model="ship.remark" :readonly='readread' class="select-width-220 fl"></el-input>
              </div>
            </el-col>
          </el-form>
        </el-row>
        <el-row :gutter="24" class="footerbtn" v-if="shipbtn">
          <el-button class="sure" @click="shipSurebtn">确定</el-button>
          <el-button class="cancel" @click="toClose">取消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dictService from '@/services/DictionaryService.js'
  import * as orgService from '@/services/OrganizationService'
  import * as crewsService from '@/services/CrewsService.js'
  import * as portRegShipsService from '@/services/PortRegShipsService.js'
  import * as berthsService from '@/services/BerthsService.js'
  import * as transCompaniesService from '@/services/TransCompaniesService.js'
  import DataTable from '@/components/common/DataTable.vue'
  import moment from 'moment'

  export default {
    props: ['organization', 'lbOptions'],
    components: {
      'data-table': DataTable
    },
    name: 'Crew',
    data: function () {
      return {
        totalPage: 0,
        currentPage: 1,
        ship: {
          address: '',
          contact: '',
          eduOrgName: '',
          remark: '',
          telephone: '',
          type: ''
        },
        thead: [
          {
            name: '培训机构名称',
            prop: 'eduOrgName'
          },
          {
            name: '地址',
            prop: 'address'
          },
          {
            name: '联系人',
            prop: 'contact'
          },
          {
            name: '类别',
            prop: 'type'
          },
          {
            name: '电话',
            prop: 'telephone'
          },
          {
            name: '其他',
            prop: 'remark'
          }],
        tableData: [],
        shipDetail: false,
        name: '111',
        shipTitle: '添加船员相关',
        readread: false,
        shipId: '',
        shipbtn: true,
        detailId: null,
        createTime: null
      }
    },
    mounted () {
      this.getData(0)
    },
    methods: {
      toClose () {
        this.shipDetail = false
        // this.ship = {}
        this.readread = false
      },
      handleQuery (param) {
        var query = ''
        if (param.type2) {
          query += 'type==' + param.type2
        }
        return query
      },
      async search (param) {
        this.currentPage = param.currentPage
        let query = await this.handleQuery(param)
        this.getData(param.currentPage - 1, query)
      },
      getData (num, query = '') {
        crewsService.search(num, query).then(async res => {

          this.totalPage = parseInt(res.headers['x-total-count'])
          let arr = []
          await res.data.forEach(item => {
            if (item.type) {
              this.lbOptions.forEach(value => {
                if (value.id == item.type) {
                  item.type = value.name
                }
              })
            }
            arr.push(item)
          })
          this.tableData = res.data
        })
      },
      shipSurebtn () {
        if (!this.ship.eduOrgName) {
          this.$alert('请输入培训机构名称')
          return false
        }
        let obj = {
          address: this.ship.address,
          contact: this.ship.contact,
          eduOrgName: this.ship.eduOrgName,
          remark: this.ship.remark,
          telephone: this.ship.telephone,
          type: this.ship.type
        }
        if (this.shipTitle == '编辑船员相关') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          crewsService.update(obj).then(res => {
            if (res) {
              this.shipDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
        } else {
          crewsService.create(obj).then(res => {
            if (res) {
              this.shipDetail = false
              this.getData(0)
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
            }
          })
        }
      },
      addShip () {
        this.shipId = ''
        this.shipDetail = true
        this.shipTitle = '添加船员相关'
        this.readread = false
        this.ship = {}
        this.shipbtn = true
      },
      showDetail (data) {
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'type' && data[key]) {
            this.lbOptions.forEach(item => {
              if (data[key] == item.name) {
                this.ship[key] = item.id
              }
            })
          } else {
            this.ship[key] = data[key]
          }
        }
      },
      manipulate4 (param) {
        if (param.action == 'view') {
          this.shipDetail = true
          this.shipTitle = '船员相关详情'
          this.readread = true
          this.shipbtn = false
          this.showDetail(param.data)
        } else if (param.action == 'edit') {
          this.shipDetail = true
          this.shipTitle = '编辑船员相关'
          this.readread = false
          this.shipbtn = true
          this.showDetail(param.data)
        } else if (param.action == 'del') {
          crewsService.deleteById(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      handleSizeChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
      },
      handleCurrentChange (val) {
        this.$emit('update', val)
        this.getData(val - 1)
        // this.$emit('update:currentPage', val)
      }
    }
  }
</script>
